<template>
  <div class="userEquipmentOption">
    <div class="userEquipmentOption_treeBg">
      <MetaTreeList
        title-size="18"
        title="设备"
        :default-props="defaultProps"
        :tree-data="equTreeData"
        @treeItemChoose="roloeItemChoose"
      ></MetaTreeList>
    </div>
    <div class="userEquipmentOption_infoBg">
      <div class="userEquipmentOption_info">
        <div v-if="Object.keys(roleInfoItem).length > 0" class="equipmentO_rightArea">
          <div class="equipmentO_infoTitleBg">
            <div class="equipmentO_infoTitle">设备信息</div>
          </div>
          <el-form
            ref="roleInfo"
            :model="roleInfoItem"
            label-width="120px"
            size="mini"
            label-position="left"
            class="equipmentO_info"
          >
            <el-row>
              <el-col :span="16">
                <el-form-item label="设备名称">
                  <el-col class="equipmentO_infoLabel">{{
                    roleInfoItem.equipmentname
                  }}</el-col>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="光源开关">
                  <div class="equipmentO_formItem">
                    <img
                      v-if="roleInfoItem.light_source && roleInfoItem.light_source == '1'"
                      src="@/assets/equipment/side_light_o.png"
                    />
                    <img v-else src="@/assets/equipment/side_light.png" />
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="可见光积分">
                  <el-col class="equipmentO_infoLabel">
                    {{
                      roleInfoItem.visible_light_integral
                        ? roleInfoItem.visible_light_integral
                        : "0"
                    }}ms
                  </el-col>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="补光灯电压">
                  <el-col class="equipmentO_infoLabel">
                    {{
                      roleInfoItem.fill_lamp_voltage
                        ? roleInfoItem.fill_lamp_voltage
                        : "0"
                    }}V
                  </el-col>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="短波积分">
                  <el-col class="equipmentO_infoLabel">
                    {{
                      roleInfoItem.shot_wave_integral
                        ? roleInfoItem.shot_wave_integral
                        : "0"
                    }}ms
                  </el-col>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="设置增益">
                  <el-col class="equipmentO_infoLabel">
                    {{
                      roleInfoItem.data_value_gain ? roleInfoItem.data_value_gain : "0"
                    }}倍
                  </el-col>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="设置偏压">
                  <el-col class="equipmentO_infoLabel">
                    {{
                      roleInfoItem.power_supply_bias
                        ? roleInfoItem.power_supply_bias
                        : "0"
                    }}mv
                  </el-col>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="设备单次运行采集次数">
                  <el-col class="equipmentO_infoLabel">
                    <el-input-number
                      size="mini"
                      :step="1"
                      :min="0"
                      v-model="singleTimes"
                      :precision="0"
                      :disabled="roleInfoItem.timing && roleInfoItem.timing == '1'"
                    ></el-input-number>
                  </el-col>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div class="equipmentO_infoTitleBg">
            <div class="equipmentO_infoTitle">设备操作</div>
          </div>
          <div class="equipmentO_eOptionArea">
            <div class="equipmentO_eOptionAreaBg">
              <!-- <div class="equipmentO_eImgArea" @click="equipInfo()"> -->
              <div class="equipmentO_eImgArea">
                <img
                  v-if="roleInfoItem.equipment_type == '1'"
                  src="@/assets/equipment/equipment_f.png"
                />
                <img
                  v-else-if="roleInfoItem.equipment_type == '2'"
                  src="@/assets/equipment/equipment_m.png"
                />
                <img
                  v-else-if="roleInfoItem.equipment_type == '3'"
                  src="@/assets/equipment/equipment_s.png"
                />
              </div>
              <div class="equipmentO_option">
                <el-row :gutter="12" class="equipmentO_optionRow">
                  <el-col :span="24">
                    <el-card
                      shadow="hover"
                      :class="
                        roleInfoItem.sample && roleInfoItem.sample == '1'
                          ? 'equipmentO_optionCard cardBg_o'
                          : 'equipmentO_optionCard'
                      "
                      :body-style="{ padding: 0 }"
                    >
                      <div class="equipmentO_optionCardBg" @click="doEquipOption('dc')">
                        样品采集
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
          <div v-if="dnChart" class="equipmentO_infoTitleBg">
            <div class="equipmentO_infoTitle">dn值 / 反射率</div>
          </div>
          <div class="equipmentO_chartBg" :style="dnChart ? 'background: #1A232c;' : ''">
            <div class="equipmentO_chartItem">
              <div ref="dnChart" class="equipmentO_originalParamChart"></div>
            </div>
            <div class="equipmentO_chartItem">
              <div ref="reflectivityChart" class="equipmentO_originalParamChart"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 单次采集备注 ldc -->
    <el-dialog
      v-if="dcRemarkFlag"
      title="添加备注（选填）"
      :visible.sync="dcRemarkFlag"
      width="50%"
      modal
      center
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-input v-model="dcRemark" placeholder="请输入备注"></el-input>
      <div class="dialogFooter">
        <el-button size="mini" @click="dcRemarkFlag = false">取消</el-button>
        <el-button type="primary" size="mini" @click="doDCCollect()">采集</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import MetaChoiceList from "../components/MetaChoiceList";
import MetaTreeList from "../components/MetaTreeList";
import deepClone from "../utils/deepClone";
import utils from "../utils/utils";
export default {
  name: "userEquipmentOption",
  components: {
    MetaChoiceList,
    MetaTreeList,
  },
  data() {
    return {
      roleInfoItem: {},
      equipData: [],
      equipDataStr: "",
      kind: "lx",
      choiceListTreeBtn: {
        ifEdit: false,
        ifDelete: false,
      },
      ws: null,
      username: "",
      seconds: 2,
      singleTimes: 10,
      times: 1,
      dnChart: null,
      startTime: "",
      reflectivityChart: null,
      realEquipmentList: [],
      dcRemarkFlag: false,
      dcRemark: "",
      equipParam: {},
      settingFlag: false,
      defaultProps: {
        children: "list",
        label: "name",
      },
      equTreeData: [],
    };
  },
  created() {
    this.initWebsocket();
  },
  mounted() {
    this.initEquipmentData();
  },
  destroyed() {
    if (this.ws) {
      this.ws.close();
      this.ws = null;
    }
  },
  methods: {
    initWebsocket() {
      let _this = this;
      _this.username = localStorage.getItem("username");
      if ("WebSocket" in window) {
        // 打开一个 web socket
        let ws = new WebSocket(process.env.PROGOO_SOCKET + `ws/${_this.username}`);
        _this.ws = ws;
        // let ws = new WebSocket(`ws://39.98.121.176:32766/?${key}&${time}`);
        ws.onopen = function () {
          // Web Socket 已连接上，使用 send() 方法发送数据
          _this.$message({
            message: "设备通讯连接成功",
            type: "success",
          });
        };
        ws.onmessage = function (evt) {
          try {
            let msg = JSON.parse(evt.data);
            _this.websocketMsgHandle(msg);
          } catch (error) {
            console.log("不是个json对象");
          }
        };
        ws.onclose = function () {
          // 关闭 websocket
        };
        ws.onerror = function () {
          _this.$message.error("设备通讯连接已断开");
        };
      } else {
        // 浏览器不支持 WebSocket
        alert("您的浏览器不支持 WebSocket!");
      }
    },
    websocketMsgHandle(msg) {
      console.log(msg);
      if (msg.type === 13) {
        if (msg.fixed_type_list && msg.fixed_type_list.length > 0) {
          if (msg.fixed_type_list[0].equipmentId === this.roleInfoItem.id) {
            // let item = deepClone(this.roleInfoItem);
            // this.roleInfoItem = {};
            // let dataParams = msg.fixed_type_list[0].panel_parameters;

            // item.continuity = dataParams.continuity;
            // item.dark = dataParams.dark;
            // item.light_source = dataParams.light_source;
            // item.record = dataParams.record;
            // item.reference = dataParams.reference;
            // item.sample = dataParams.sample;
            // item.timing = dataParams.timing;
            // item.timing_interval = dataParams.timing_interval;

            // this.roleInfoItem = deepClone(item);

            // 设备控制改造 ------ start 20211019 -------
            // 1连续采集关，2连续采集开，3样品采集，4暗电流，5标准板，6定时关，7定时开
            let item = deepClone(this.roleInfoItem)
            this.roleInfoItem = {}
            let dataParams = msg.fixed_type_list[0].panel_parameters
            item.continuity = dataParams.collectionType == '2' ? 1 : 2
            item.dark = dataParams.collectionType == '4' ? 1 : 2
            item.light_source = dataParams.light_source
            item.sample = dataParams.collectionType == '3' ? 1 : 2
            item.timing = dataParams.collectionType == '7' ? 1 : 2
            item.reference = dataParams.collectionType == '5' ? 1 : 2
            this.roleInfoItem = deepClone(item)
            // 设备控制改造 ------ end 20211019 -------

          }
        }
      } else if (msg.type === 17) {
        this.realEquipmentList = msg.fixed_type_list ? msg.fixed_type_list : [];
      } else if(msg.type === 100) {
        let showData = {}
        if(msg.equipment_type !== '2') {
          showData = msg.fixed_type_list.length > 0 ? msg.fixed_type_list[0] : {}
        }
        if(Object.keys(showData).length > 0) {
          if(showData.equipmentId === this.roleInfoItem.id) {
            for(let i in showData.dataList) {
              let selectItem = {}
              selectItem.value = showData.dataList[i].value
              selectItem.name = showData.dataList[i].name
              selectItem.xData = showData.centralWavelength
              selectItem.yData = showData.dataList[i].arr
              this.chartInit(selectItem)
            }
          }
        }
      }
    },
    doEquipOption(type) {
      if (this.roleInfoItem.collection_type == 7) {
        // 定时采集中
        return;
      }
      if (this.realEquipmentList.length > 0) {
        if (this.getEquipmentStatus(this.roleInfoItem.id) !== 2) {
          if (type === "dc" || type === "lx" || type === "ds") {
            if (!this.roleInfoItem.aid || this.roleInfoItem.aid === "") {
              this.$notify.error({
                title: "错误",
                message: "请先到【设备管理】关联算法后，再进行采集。",
              });
              return;
            }
            if (type === "ds" && this.startTime === "") {
              this.$notify.error({
                title: "错误",
                message: "请选择采集开始时间",
              });
              return;
            }
            let nowTimes = parseInt(new Date().getTime() / 1000 / 60);
            let chooseTimes = parseInt(new Date(this.startTime).getTime() / 1000 / 60);
            if (type === "ds" && chooseTimes < nowTimes) {
              this.$notify.error({
                title: "错误",
                message: "定时采集时间不可早于当前时间",
              });
              return;
            }
          }
          //单次采集增加备注 ldc
          if (type === "dc") {
            this.dcRemark = "";
            this.dcRemarkFlag = true;
          } else {
            this.$confirm("是否立即执行采集任务?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "再等等",
              type: "warning",
            }).then(() => {
              let msgJson = {
                username: this.username,
                snid: this.roleInfoItem.snid,
                type: type,
                seconds: this.seconds,
                version: this.roleInfoItem.version,
                remark: "",
              };
              if (type !== "adl" && type !== "bzb") {
                msgJson.times =
                  this.singleTimes && this.singleTimes !== "" && this.singleTimes !== 0
                    ? this.singleTimes
                    : 10;
              }
              if (type === "ds") {
                msgJson.time = this.roleInfoItem.timing_interval;
                // msgJson.count = this.times && this.times !== '' && this.times !== 0 ? this.times : 0
                if (this.kind === "lx") {
                  msgJson.count = 0;
                } else {
                  msgJson.count =
                    this.times && this.times !== "" && this.times !== 0 ? this.times : 0;
                }
                msgJson.startTime = this.startTime;
              }
              this.ws.send(JSON.stringify(msgJson));
              this.$notify.success({
                title: "成功",
                message: "开始采集!",
              });
            });
          }
        } else {
          this.$notify.error({
            title: "错误",
            message: "当前设备不在线",
          });
        }
      } else {
        this.$notify.error({
          title: "错误",
          message: "正在获取设备信息",
        });
      }
    },
    doDCCollect() {
      let msgJson = {
        username: this.username,
        snid: this.roleInfoItem.snid,
        type: "dc",
        seconds: this.seconds,
        version: this.roleInfoItem.version,
        remark: this.dcRemark,
        times:
          this.singleTimes && this.singleTimes !== "" && this.singleTimes !== 0
            ? this.singleTimes
            : 10,
      };
      this.ws.send(JSON.stringify(msgJson));
      this.dcRemarkFlag = false;
    },
    getEquipmentStatus(equipmentId) {
      let status = "";
      for (let i in this.realEquipmentList) {
        for (let j in this.realEquipmentList[i].list) {
          if (this.realEquipmentList[i].list[j].id === equipmentId) {
            status = this.realEquipmentList[i].list[j].on_type;
            return status;
          }
        }
      }
      return status;
    },
    initEquipmentData() {
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + "admin/equipment/userarea",
        method: "post",
        data: {},
      }).then((res) => {
        if (res.data.code === 200) {
          this.equTreeData = res.data.result;
          this.equipData = [];
          let currentDataItem = {};
          for (let i in this.equTreeData) {
            this.equTreeData[i].name =
              "(" + this.equTreeData[i].area_jc + ")" + this.equTreeData[i].area_name;
            this.equTreeData[i].level = 1;
            for (let j in this.equTreeData[i].list) {
              this.equTreeData[i].list[j].name = this.equTreeData[i].list[
                j
              ].equipmentname;
              this.equTreeData[i].list[j].level = 2;
              for (let key in this.equTreeData[i].list[j].equipmentRecord) {
                //子表中的这些参数不正确，不加入主表。
                if (
                  key === "aid" ||
                  key === "id" ||
                  key === "eid" ||
                  key === "snid" ||
                  key === "equipment_type"
                ) {
                  continue;
                }
                this.equTreeData[i].list[j][key] = this.equTreeData[i].list[
                  j
                ].equipmentRecord[key];
              }
              this.equipData.push(this.equTreeData[i].list[j]);
              if (
                Object.keys(this.roleInfoItem).length > 0 &&
                this.roleInfoItem.id === this.equTreeData[i].list[j].id
              ) {
                currentDataItem = this.equTreeData[i].list[j];
              }
            }
          }
          // this.equipDataStr = JSON.stringify(this.equipData)
          if (Object.keys(currentDataItem).length > 0) {
            this.roleInfoItem = deepClone(currentDataItem);
          } else {
            this.roleInfoItem = {};
          }
          // this.$nextTick(() => {
          //   this.$refs.userEquipmentOption_list.setChoiceRole(this.roleInfoItem)
          // })
        } else {
          this.$notify.error({
            title: "错误",
            message: res.data.message,
          });
        }
      });
    },
    roloeItemChoose(item) {
      if (item.level === 1) {
        return;
      }
      this.roleInfoItem = deepClone(item);
      // 1连续采集关，2连续采集开，3样品采集，4暗电流，5标准板，6定时关，7定时开
      if (this.roleInfoItem.collection_type == 1) {
        this.roleInfoItem.continuity = 2;
      } else if (this.roleInfoItem.collection_type == 2) {
        this.roleInfoItem.continuity = 1;
      } else if (this.roleInfoItem.collection_type == 6) {
        this.roleInfoItem.timing = 2;
      } else if (this.roleInfoItem.collection_type == 7) {
        this.roleInfoItem.timing = 1;
      } else if (this.roleInfoItem.collection_type == 8) {
        this.roleInfoItem.continuity = 2;
        this.roleInfoItem.timing = 2;
      }

      this.singleTimes = this.roleInfoItem.acquisition_density; // times -> 采集密度
      if (this.roleInfoItem.timing_time && this.roleInfoItem.timing_time !== "") {
        let startTime = new Date(this.roleInfoItem.timing_time);
        this.startTime = startTime;
      } else {
        this.startTime = "";
      }
      // this.startTime = this.roleInfoItem.timing_time // startTime -> 开始时间
      this.times = this.roleInfoItem.timing_bout; // count -> 定时采集次数
      if (this.times == 0) {
        this.kind = "lx";
      } else {
        this.kind = "cs";
      }
    },
    stopBtnStatus() {
      if (
        (this.roleInfoItem.continuity && this.roleInfoItem.continuity == "1") ||
        (this.roleInfoItem.timing && this.roleInfoItem.timing == "1")
      ) {
        return true;
      }
      return false;
    },
    stopCollect() {
      let msgJson = {};
      if (this.roleInfoItem.continuity && this.roleInfoItem.continuity == "1") {
        msgJson = {
          username: this.username,
          snid: this.roleInfoItem.snid,
          type: "stop",
        };
      } else if (this.roleInfoItem.timing && this.roleInfoItem.timing == "1") {
        msgJson = {
          username: this.username,
          snid: this.roleInfoItem.snid,
          type: "timeStop",
        };
      }
      this.ws.send(JSON.stringify(msgJson));
    },
    chartInit(data) {
      let echarts = require('echarts')
      if(data.value === 'dnValue') {
        this.dnChart = echarts.init(this.$refs['dnChart'])
        this.dnChart.setOption({
          title: {
            text: 'dn值',
            x:'center',
            y:'top',
            textStyle: {
              color: '#C0FFFF'
            }
          },
          color: ['#9244E3'],
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            left: '15%',
            bottom: '5%',
            top: '10%',
            height: '80%',
            right: '2%',
            show: true,
            backgroundColor: '#002738'
            // containLabel: true
          },
          xAxis: {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#C0FFFF',
              }
            },
            axisLabel: {
              show: true,
              fontSize: 10
            },
            boundaryGap: false,
            data: data.xData
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#C0FFFF'
              }
            },
            axisLabel: {
              show: true,
              fontSize: 10
            },
            splitLine: {
              lineStyle: {
                  color: ['#34697c']
              }
            },
            scale:true
          },
          series: [
            {
              name: data.name,
              type: 'line',
              stack: '总量',
              smooth: true,
              data: data.yData,
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(146,68,227,0.3)'
                }, {
                  offset: 1,
                  color: '#9244E3'
                }])
              },
            }
          ]
        })
        this.$nextTick(() => {
          this.dnChart.resize()
        })
      }else if(data.value === 'reflectivity') {
        this.reflectivityChart = echarts.init(this.$refs['reflectivityChart'])
        this.reflectivityChart.setOption({
          title: {
            text: '反射率',
            x:'center',
            y:'top',
            textStyle: {
              color: '#C0FFFF'
            }
          },
          color: ['#9244E3'],
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            left: '15%',
            bottom: '5%',
            top: '10%',
            height: '80%',
            right: '2%',
            show: true,
            backgroundColor: '#002738'
            // containLabel: true
          },
          xAxis: {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#C0FFFF',
              }
            },
            axisLabel: {
              show: true,
              fontSize: 10
            },
            boundaryGap: false,
            data: data.xData
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#C0FFFF'
              }
            },
            axisLabel: {
              show: true,
              fontSize: 10
            },
            splitLine: {
              lineStyle: {
                  color: ['#34697c']
              }
            },
            scale:true
          },
          series: [
            {
              name: data.name,
              type: 'line',
              stack: '总量',
              smooth: true,
              data: data.yData,
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(146,68,227,0.3)'
                }, {
                  offset: 1,
                  color: '#9244E3'
                }])
              },
            }
          ]
        })
        this.$nextTick(() => {
          this.reflectivityChart.resize()
        })
      }
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
.userEquipmentOption {
  width: 100%;
  height: 100%;
  display: flex;
  flex-grow: 1;
  box-sizing: border-box;
  padding: 15px;
  overflow-y: scroll;
  .userEquipmentOption_treeBg {
    height: 100%;
    border: 1px solid #e4eaec;
    border-radius: 6px;
  }
  .userEquipmentOption_infoBg {
    height: 100%;
    box-sizing: border-box;
    padding: 0 7px;
    flex: 1;
  }
  .userEquipmentOption_info {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    border: 1px solid rgb(228, 234, 236);
    flex: 1;
    overflow-y: scroll;
    box-sizing: border-box;
    padding: 15px;
    .equipmentO_rightArea {
      .equipmentO_infoTitleBg {
        width: 100%;
        float: left;
        // margin-top: 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid #e4e7ed;
        .equipmentO_infoTitle {
          font-size: 20px;
          float: left;
          height: 30px;
          line-height: 30px;
        }
        .equipmentO_delBtn {
          float: right;
        }
      }
      .equipmentO_info {
        width: 100%;
        float: left;
        padding-top: 10px;
        .equipmentO_infoLabel {
          color: #606266;
        }
        .equipmentO_formItem {
          display: flex;
          align-items: center;
        }
      }
      .equipmentO_eOptionArea {
        width: 100%;
        float: left;
        .equipmentO_eOptionAreaBg {
          width: 100%;
          float: left;
          display: flex;
          box-sizing: border-box;
          padding: 10px 0;
          .equipmentO_eImgArea {
            flex: 1;
            display: flex;
            justify-content: center;
            box-sizing: border-box;
            padding: 0 10px;
            align-items: flex-start;
            img {
              width: 100%;
            }
          }
          .equipmentO_option {
            flex: 4;
            box-sizing: border-box;
            .equipmentO_optionRow {
              margin-bottom: 12px;
              .equipmentO_optionCard {
                cursor: pointer;
                .equipmentO_optionCardBg {
                  width: 100%;
                  padding: 20px;
                  box-sizing: border-box;
                  display: flex;
                  .equipmentO_optionCardTitle {
                    display: inline-block;
                    vertical-align: middle;
                    margin-right: 10px;
                    flex: 1;
                  }
                }
              }
              .equipmentO_optionCardWhole {
                .equipmentO_optionCardBg {
                  width: 100%;
                  display: flex;
                  box-sizing: border-box;
                  padding: 20px;
                  align-items: center;
                  cursor: pointer;
                  .equipmentO_optionCardTitle {
                    box-sizing: border-box;
                    padding: 20px 0 20px 20px;
                    display: inline-block;
                    vertical-align: middle;
                    margin-right: 10px;
                    flex: 1;
                    cursor: pointer;
                  }
                  .equipmentO_optionCardOption {
                    display: flex;
                    flex-direction: column;
                    flex: 1;
                    .equipmentO_optionCardOptionRowUp {
                      display: flex;
                      padding: 10px 0 5px;
                      .equipmentO_optionCardOptionCol {
                        flex: 1;
                      }
                    }
                    .equipmentO_optionCardOptionRowDown {
                      display: flex;
                      padding: 5px 0 10px;
                      .equipmentO_optionCardOptionCol {
                        flex: 1;
                      }
                    }
                  }
                }
              }
              .cardBg_o {
                background: #7fffd4;
              }
            }
          }
        }
      }
      .equipmentO_chartBg {
        width: 100%;
        float: left;
        height: 400px;
        .equipmentO_chartItem {
          width: 50%;
          float: left;
          height: 100%;
          box-sizing: border-box;
          padding: 10px;
        }
        .equipmentO_originalParamChart {
          width: 100%;
          height: 100%;
          float: left;
        }
      }
    }
  }
  .dialogFooter {
    display: flex;
    justify-content: center;
    margin-top: 0.5rem;
  }
}
</style>
